<div class="layuimini-container">

	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<!-- 搜索 -->
		<form class="layui-form" action="">
			<div class="layui-inline">
				<label class="layui-form-label"> 所属总店</label>
				<div class="layui-input-inline">
					<select name="headStore" id="mainStore" lay-filter="mainStore">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label"> 所属分店</label>
				<div class="layui-input-inline">
					<select name="subStore" id="subStore" lay-filter="subStore">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">筛选日期</label>
				<div class="layui-input-inline">
					<input class="layui-input" placeholder="开始日" name="start" id="start" autocomplete="off"/>
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline">
					<input class="layui-input" placeholder="截止日" name="end" id="end" autocomplete="off"/>
				</div>
			</div>

			<!-- 搜索按钮 -->
			<div class="layui-inline">
				<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
					 class="layui-icon">&#xe615;</i>查询</button>
				<button type="submit" id="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
					 class="layui-icon"></i>导出报表</button>
			</div>
		</form>
	</div>


	<!-- 标头 -->
	<div class="layuimini-main" style="margin: 10px;padding:10px;">
		<h2 align="center" id="axs"></h2>


		<!--简洁选项卡-->
		<div class="layui-card-body">
			<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">

				<ul class="layui-tab-title">
					<li class="layui-this">检测时段人次柱形图</li>
					<li>检测频次排行</li>
					<li>结果分析图</li>
				</ul>


				<div class="layui-tab-content">
					<!-- 卡1: 检测时段人次分布-->
					<div class="layui-tab-item layui-show">
						<div align="center">
							<table cellpadding="15" cellspacing="15" style="width: 800px; height: 90px;">
								<tbody id="totalbe"></tbody>
							</table>
						</div>
						<br />
						<!--检测时段人次分布 柱形图-->
						<div id="myChart" style="width:80%; height: 500px; padding-left:5%; margin-left:auto; margin-right:auto;"></div>
					</div>


					<!-- 卡2:检测频次排行 -->
					<div class="layui-tab-item">
						<!-- 检测频次排行表格 -->
						<!-- 表格：数据表格 -->
						<table class="layui-hide" id="testFreSort" lay-filter="testFreSortFilter"></table>
					</div>

					<!-- 卡3:结果分析图 -->
					<div class="layui-tab-item">
						<div align="center">
							<font style="font-size: 16px;" id="zxx"></font>
						</div>
						<!--结果分析图-->
						<div id="fenxi" style="width: 800px; height: 500px; margin-left:auto;margin-right:auto;"></div>
					</div>

				</div>
			</div>
		</div>

	</div>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script src="js/lay-module/echarts/echarts.js"></script>
<script type="text/javascript">
	function startTime(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		data+=myDate.getFullYear()+'-'+(myMonth+1)+'-';
		myDate.setMonth(myMonth+1);
		myDate.setDate(1);
		data+=myDate.getDate();
		return data;
	}
	
	function endTime(){
		var data="";
		var myDate = new Date();
		var myMonth=myDate.getMonth();
		data+=myDate.getFullYear()+'-'+(myMonth+1)+'-';
		myDate.setMonth(myMonth+1);
		myDate.setDate(0);
		data+=myDate.getDate();
		return data;
	}
	function initTable(result) {
		var age = 0;
		var f = 0;
		var totable = document.getElementById("totalbe");
		for (var i = 0; i < result.length; i++) {
			age += result[i].age;
			if (result[i].status == 0) {
				f++;
			}
		}
		var gg = ((f / result.length).toFixed(2) * 100) + "%";
		var str = "";
		str += "<tr align='center'>" +
			"<td>平均年龄(岁)</td>" +
			"<td>异常人次</td>" +
			"<td>异常比例</td>" +
			"</tr>" +
			"<tr align='center'>" +
			"<td>" + (age / result.length).toFixed(0) + "</td>" +
			"<td>" + f + "</td>" +
			"<td>" + gg + "</td>" +
			"</tr>" +
			"<tr align='center'>" +
			"<td colspan='3' align='center'>按时段检测人次分布图</td>"
		"</tr>";
		totable.innerHTML = str;
	}

	function init(obj) {
		$.ajax({
			url: 'http://localhost:8004/sccMedicalResult/moon',
			type: 'get',
			data: {
				"data": JSON.stringify(obj)
			},
			success: function(result) {
				if (result.success) {
					var data = result.data;
					initTable(data);
					week(data);
					initWaa(data);
				}
			}
		});
	}

	function week(result) {
		// 基于准备好的dom，指定样式infographic,初始化echarts实例
		var myChart = echarts.init(document.getElementById('myChart'), 'infographic');
		option = {
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: getWeek(result),
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				max: (result.length + 2),
				type: 'value'
			}],
			series: [{
				name: '直接访问',
				type: 'bar',
				barWidth: '60%',
				data: getData(result)
			}]
		};

		<!--使用指定的配置项和数据显示图表-->
		myChart.setOption(option);
	}
	var weekData = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"];

	function getWeek(obj) {
		var name = [];
		for (var i = 0; i < obj.length; i++) {
			name[i] = weekData[obj[i].week];
		}
		const set = new Set(name);
		return [...set];
	}

	function getWeekData(obj) {
		var name = [];
		for (var i = 0; i < obj.length; i++) {
			name[i] = obj[i].week;
		}
		const set = new Set(name);
		return [...set];
	}

	function getData(data) {
		var bar = [];
		var week = getWeekData(data);
		for (var i = 0; i < week.length; i++) {
			var n = 0;
			for (var j = 0; j < data.length; j++) {
				if (week[i] == data[j].week) {
					n++;
				}
			};
			bar[i] = n;
		}
		return bar;
	}
	
	function initWaa(result){
		var fenxi = echarts.init(document.getElementById('fenxi'), 'infographic');
		option = {
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: getWeek(result)
			},
			yAxis: {
				type: 'value',
				max: result.length+2
			},
			series: [{
				data: getData(result),
				type: 'line',
				smooth: true
			}]
		};
		<!--使用指定的配置项和数据显示图表-->
		fenxi.setOption(option);
	}
</script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();
		form.on('select(mainStore)', function(data) {
			var str = document.getElementById("mainStore").value;
			if (str != "") {
				$.ajax({
					url: 'http://localhost:8004/sccPatient/subStore',
					type: 'get',
					async: false,
					data: {
						"mainStoreCode": str
					},
					success: function(result) {
						var data = result.data;
						var subStore = document.getElementById("subStore");
						for (var i = 0; i < data.length; i++) {
							var option = document.createElement("option");
							option.setAttribute("value", data[i].storeCode);
							option.innerText = data[i].storeName;
							subStore.appendChild(option);
						}
						form.render("select");
					}
				});
			}
		});
		layer.ready(function() {
			$.ajax({
				url: 'http://localhost:8004/sccPatient/mainStore',
				type: 'get',
				async: false,
				success: function(result) {
					var data = result.data;
					var mainStore = document.getElementById("mainStore");
					for (var i = 0; i < data.length; i++) {
						var option = document.createElement("option");
						option.setAttribute("value", data[i].storeCode);
						option.innerText = data[i].storeName;
						mainStore.appendChild(option);
					}
					form.render("select");
				}
			});
		});
		//对table进行初始化
		table.render({
			elem: '#testFreSort',
			url: 'http://localhost:8004/sccMedicalResult/YIELD',
			cols: [
				[ //字段，表头
					{
						type: 'numbers',
						title: '排名',
						width: 50,
						align: 'center'
					},
					{
						field: 'name',
						title: '姓名',
						align: 'center'
					},
					{
						field: 'sex',
						title: '性别',
						align: 'center',
						templet: function(d) {
							if (d.sex == 1) {
								return '男'
							} else {
								return '女'
							}
						}
					},
					{
						field: 'idCard',
						title: '身份证号',
						minWidth: 300,
						align: 'center'
					},
					{
						field: 'phone',
						title: '联系方式',
						align: 'center'
					},
					{
						field: 'countOfTest',
						title: '检测次数',
						align: 'center'
					},
					{
						field: 'fractionDefective',
						title: '指标异常率',
						align: 'center'
					},
					{
						field: 'mainStoreName',
						title: '所属总店',
						align: 'center'
					},
					{
						field: 'subStoreName',
						title: '所属分店',
						align: 'center'
					}
				]
			]
		});

		//日期
		laydate.render({
			elem: '#start'
		});

		laydate.render({
			elem: '#end'
		});
		form.on('submit(data-search-btn)', function(data) {
			echarts.init(document.getElementById('myChart')).dispose();
			echarts.init(document.getElementById('fenxi')).dispose();
			var result = data.field;
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			if (result.start == "" && result.end == "") {
				layer.msg("请选择合格率筛选的开始日期和截止日期");
				return false;
			};
			Date.prototype.toLocaleString = function() {
				undefined
				return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日";
			};
			var axs = document.getElementById("axs");
			var oldTime = (new Date(result.start)).getTime();
			var unixTimestamp = new Date(oldTime * 1);
			commonTime = unixTimestamp.toLocaleString();
			var oldTime1 = (new Date(result.end)).getTime();
			var unixTimestamp1 = new Date(oldTime1 * 1);
			commonTime1 = unixTimestamp1.toLocaleString();
			axs.innerText = "消费者数据图谱(" + commonTime + "至" + commonTime1 + ")";
			init(result);
			table.reload('testFreSort', {
				where: { //条件
					data: JSON.stringify(result) //搜索条件
				}
			}, 'data');
			document.getElementById("zxx").innerHTML="按时段检测人次条形图";
			return false;
		});
		
		layer.ready(function(){//初始化加载
			var data={};
		  	data.start=startTime();
			data.end=endTime();
			var axs = document.getElementById("axs");
			axs.innerText = "消费者数据图谱(" + data.start+ "至" + data.end + ")";
			table.reload('testFreSort', {
				where: { //条件
					data: JSON.stringify(data) //搜索条件
				}
			}, 'data');
			document.getElementById("zxx").innerHTML="按时段检测人次条形图";
			init(data);
		});

	});
</script>

